<template>
    <div class="tagList" ref="tagListRef" @mousedown="handleMouseDown" @mousemove="handleMouseMove"
                @mouseup="handleMouseUp" @mouseleave="handleMouseLeave"
                :style="{ cursor: isDragging ? 'grabbing' : 'grab' }">
                <div class="tag" v-for="item in list">
                    <span @click="goToDetail(item)" class="tagText">{{ item.genre_name }}</span>
                </div>
            </div>
</template>
<script setup>
const tagListRef = ref(null)
const isDragging = ref(false)
const startX = ref(0)
const scrollLeft = ref(0)
const route = useRoute()
const props = defineProps({
    list:{
        type:Array,
        required:true
    },
    type:{
        type:String,
        required:true
    },
})
const goToDetail = (item) => {
    
    // 判断item.genre_slug是否以game-开头 如果是截取调game- 否则则不做处理
    let itemSlug = item.genre_slug.includes('game-') ? item.genre_slug.replace('game-', '') : item.genre_slug
    let url = (route.params.hasOwnProperty('language') ?  "/" + route.params.language : '') + `/${props.type}/${itemSlug}`
    
    navigateTo(url)
}
const handleMouseDown = (e) => {
    isDragging.value = true
    startX.value = e.pageX - tagListRef.value.offsetLeft
    scrollLeft.value = tagListRef.value.scrollLeft
}

const handleMouseMove = (e) => {
    if (!isDragging.value) return
    e.preventDefault()
    const x = e.pageX - tagListRef.value.offsetLeft
    const walk = (x - startX.value) * 2
    tagListRef.value.scrollLeft = scrollLeft.value - walk
}

const handleMouseUp = () => {
    isDragging.value = false
}

const handleMouseLeave = () => {
    isDragging.value = false
}
</script>
<style scoped lang="less">
.tagList {
        margin: 24px 0;
        user-select: none;
        -webkit-user-select: none;
        cursor: grab;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        width: 100%;
        overflow-x: auto;
        /* 添加水平滚动 */
        overflow-y: hidden;
        /* 隐藏垂直滚动 */
        flex-wrap: nowrap;
        /* 防止标签换行 */
        padding-bottom: 8px;

        /* 为滚动条留出空间 */
        &::-webkit-scrollbar {
            height: 0;
            /* 隐藏滚动条 */
            width: 0;
            background: transparent;
            /* 可选：背景透明 */
        }

        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;

        /* IE/Edge */
        .tag {
            flex-shrink: 0;
            /* 防止标签被压缩 */
            border-radius: 100px;
            border: 1px solid var(--Gray-200, #E5E6EA);
            background: #FFF;
            display: flex;
            padding: 6px 16px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            min-width: fit-content;
            /* 确保标签有足够的宽度 */
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;

            .tagText {
                color: var(--Text-Text, #505662);
                font-family: Roboto;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 20px;
                /* 166.667% */
                text-transform: capitalize;
                white-space: nowrap;
                /* 防止文本换行 */
            }
        }
    }
    </style>